<?php
    session_start();
    $userName = $_SESSION['userName'];
    $admin = $_SESSION['admin'];
    $filterTrailHeadQuery = $_SESSION['filterTrailHeadQuery'];
    $filterTrailQuery = $_SESSION['filterTrailQuery'];
    //can use this variable to access the username of the logged in user.
?>
<?php
    // run initializer to set $username, $password, $database
    include("dbinfo.inc.php");
    mysql_connect(localhost,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    if($filterTrailHeadQuery){
        $query = $filterTrailHeadQuery;
    }else{
        $query="SELECT * FROM TrailHead";
    }
    $result=mysql_query($query);
    
    // recover ALL the things from this broad query
    $num=mysql_numrows($result);
?>
<title>trailfinder</title>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxbj8cDwopldycp3gB4mijp6Qs_SskUz4&sensor=false">
    </script>
    <script type="text/javascript" src="jquery-1.4.2.min.js">
    </script>

    <script type="text/javascript">

<?php
    $p = 0;
    $q = 0;
    $trailheads = array ();
    $trails = array ();
    $reviews = array ();
    while($p < $num){
        $trailheads[$p][] = mysql_result($result,$p,"name");
        $trailheads[$p][]  = mysql_result($result,$p,"gps");
        $trailheads[$p][]  = mysql_result($result,$p,"start_altitude");
        $trailheads[$p][]  = mysql_result($result,$p,"dog");
        $trailheads[$p][]  = mysql_result($result,$p,"bike");
        
        $trailhead_id=mysql_result($result, $p, "ID");
        
        if($filterTrailQuery){
            $query2 = $filterTrailQuery . " AND headID = $trailhead_id;";
        }else{
            $query2="SELECT * FROM Trail WHERE headID=$trailhead_id;";
        }
        $result2=mysql_query($query2);
        $num2=mysql_numrows($result2);
        
        $k = 0;
        while($k < $num2){
            $id = mysql_result($result2,$k,"ID");
            $trails[$id][] = mysql_result($result2,$k,"name");
            $trails[$id][] = mysql_result($result2,$k,"length");
            $trails[$id][] = mysql_result($result2,$k,"highest_altitude");
            $trails[$id][] = mysql_result($result2,$k,"difficulty");
            $trails[$id][] = mysql_result($result2,$k,"notes");
            $trails[$id][] = mysql_result($result2,$k,"avgRating");
            
            $trail_id=mysql_result($result2, $k, "ID");
            $query3="SELECT * FROM Review WHERE trailID=$trail_id";
            $result3=mysql_query($query3);
            
            $num3=mysql_numrows($result3);
            
            $i = 0;
            while($i < $num3){
                $reviews[$trail_id][$i][] = mysql_result($result3,$i,"rating");
                $reviews[$trail_id][$i][] = mysql_result($result3,$i,"review");
                $i++;
            }
            ++$q;
            ++$k;
        }
        if(($num2 > 0) || ($filterTrailQuery == NULL)){
            ++$p;
        }else{
            array_splice($trailheads, $p);
            --$num;
        }
    }
    
    $js_trailheads = json_encode($trailheads);
    echo "var js_trailheads = ". $js_trailheads .";\n";
    
    $js_trails = json_encode($trails);
    echo "var js_trails = ". $js_trails .";\n";
    
    $js_reviews = json_encode($reviews);
    echo "var js_reviews = ". $js_reviews .";\n";
    
    $js_username = json_encode($userName);
    echo "var js_username = ". $js_username .";\n";
    
    $js_admin = json_encode($admin);
    echo "var js_admin = ". $js_admin .";\n";
?>
	    /********************************************/
	    //Store trail heads in array trailheads
	    /********************************************/
	    var i;
        var trailheads = new Array();
        trailheads = js_trailheads;
        var trails = new Array();
        trails = js_trails;
        var reviews = new Array();
        reviews = js_reviews;

        var username = js_username;
        var admin = js_admin;

        Object.size = function(obj) {
            var size = 0, key;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };
      /********************************************/
	  // Modifies the paragraph innerHTML in the tbox2 div
	  /********************************************/
    function printTrailHeadInfo(index){
        document.getElementById('info').innerHTML="Trail Head Name: "+trailheads[index][0]+"<br/>GPS Coordinates: "+trailheads[index][1]+"<br/>Start Altitude: "+trailheads[index][2]+"<br/>Restrictions: Dogs allowed: "+trailheads[index][3]+", Bikes allowed: "+trailheads[index][4]+"<br/><br/><br/>"
        if(admin){
            document.getElementById('info').innerHTML+= "<input type='submit' class='button-style' value='Insert Trail' onclick='showTrailInsertDiv()'/><br/> <form name='Delete Trail Head' action='deleteTrailHead.php' method='post'><input type='hidden' name='TrailHeadName' value='"+trailheads[index][0]+"'/><input type='submit' class='button-style' value='Delete Trail Head' onclick='postDeleteTrailhead("+index+")'/></form>";
        }
        document.getElementById('header3').innerHTML="Trail Head Info";
        
        document.getElementById('reviewHeader').innerHTML="Reviews";
        
        document.getElementById('tbox3').style.display = "none";
        
        document.forms['InsertTrail']['trailHeadName'].value = trailheads[index][0];
    }

    function printTrailInfo(index){
        document.getElementById('info').innerHTML="Trail Name: "+trails[index][0]+"<br/>Length: "+trails[index][1]+"<br/>Highest Altitude: "+trails[index][2]+"<br/>Difficulty: "+trails[index][3]+"<br/>Notes: "+trails[index][4]+"<br/><br/>";
        if(admin){
            document.getElementById('info').innerHTML+="<form name='Delete Trail' action='deleteTrail.php' method='post'><input type='hidden' name='TrailName' value='"+trails[index][0]+"'/><input type='submit' class='button-style' value='Delete Trail' onclick='postDeleteTrail("+index+")'/></form>"
        }
        if(username){
           document.getElementById('info').innerHTML+="<form name='Save Trail' action='insertSaved.php' method='post'><input type='hidden' name='trailName' value='"+trails[index][0]+"'/><input type='hidden' name='userName' value='"+username+"'/><input type='submit' class='button-style' value='Save Trail'/></form>";
        }
        document.getElementById('header3').innerHTML="Trail Info";
        document.getElementById('review_info').innerHTML="";
        if(trails[index][5]){
         document.getElementById('review_info').innerHTML="Average Rating: "+trails[index][5]+"<br/><br/>";
        }
        for(x = 0; x< Object.size(reviews[index]); x++){
            document.getElementById('review_info').innerHTML+="Rating: "+reviews[index][x][0]+"<br/>Review: "+reviews[index][x][1]+"<br/><br/>";
        }
        
        if(Object.size(reviews[index]) == 0){
            document.getElementById('review_info').innerHTML="There are no reviews for this trail.";
        }
        
        if(username){
            document.getElementById('review_info').innerHTML+="<br><input type='submit' class='button-style' value='Add Review' onclick='showReviewInsertDiv()'/>";
        }
        
        document.getElementById('tbox3').style.display = "inline";
        
        document.forms['InsertReview']['trailName'].value = trails[index][0];
        document.forms['InsertReview']['userName'].value = username;
    }

    function postDeleteTrailhead(index){
        //newIndex = (index > 1)? index-1 : 0;
        //printTrailHeadInfo(newIndex);
    }
    function postDeleteTrail(index){
        //newIndex = (index > 1)? index-1 : 0;
        //printTrailInfo(newIndex);
    }
        function ConvertGPS(direction, days, minutes, seconds){
        var dd = parseFloat(days) + parseFloat(minutes)/60 + parseFloat(seconds)/(60*60);
        if (direction == "S" || direction == "W"){
            dd = dd * -1;
        }
        return dd;
    }
    function ParseGPS(input)
    {
        var parts = input.split(" ",4);
        var latDir = parts[0].charAt(0);
        var latDay = parts[0].substr(1);
        var latMS = parts[1].split(".");
        var lngDir = parts[2].charAt(0);
        var lngDay = parts[2].substr(1);
        var lngMS = parts[3].split(".");

        var latitude = ConvertGPS(latDir, latDay,latMS[0],latMS[1]);
        var longitude = ConvertGPS(lngDir,lngDay,lngMS[0],lngMS[1]);
        var coords = [latitude,longitude];
        return coords;
    }

	/* Initial map call */
      function initialize() {
          $("#expList li").click(function(event) {
                                 event.stopPropagation();
                                 var index = 0;
                                 var temp = $(this).clone().children().remove().end().text();
                                 name = temp.replace(/^\s+|\s+$/g, '');
                                 if(this.id == "head"){
                                    for(var x=0; x < trailheads.length; x++){
                                        temp = trailheads[x][0].replace(/^\s+|\s+$/g, '');
                                        if(temp == name){
                                            index = x;
                                            break;
                                        }
                                    }
                                    printTrailHeadInfo(index);
                                 }else{
                                    for(var x=0; x < trails.length; x++){
                                        temp = trails[x][0].replace(/^\s+|\s+$/g, '');
                                        if(temp == name){
                                            index = x;
                                            break;
                                        }
                                    }
                                 }
                            });
        var mapOptions = {
          center: new google.maps.LatLng(40.0150, -105.2700),
          zoom: 8,
          /*mapTypeId: google.maps.MapTypeId.ROADMAP*/
          /*mapTypeId: google.maps.MapTypeId.TERRAIN*/
          /*mapTypeId: google.maps.MapTypeId.SATELLITE*/
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
          if(Object.size(trailheads) > 0){
              printTrailHeadInfo(0);
          }
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        /* Loops through trailheads and places markers */
          if(Object.size(trailheads) > 0){
              var i;
              var infowindow = new google.maps.InfoWindow(),marker,i;
                for(i = 0; i < Object.size(trailheads); i++){
                    var coords = ParseGPS(trailheads[i][1]);
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(coords[0],coords[1]),
                        map: map,
                        title: 'Click to zoom'
                    });
                    google.maps.event.addListener(marker,'click',(function(marker,i){
                        return function() {
                            map.setZoom(10);
                            map.setCenter(marker.getPosition());
                            var name = trailheads[i][0];
                            var gps = trailheads[i][1]
                            var alt = trailheads[i][2];
                            var dog = trailheads[i][3];
                            var bike = trailheads[i][4];
                            printTrailHeadInfo(i);
                            //infowindow.setContent(trailheads[i][0]);
                            //infowindow.open(map,marker);
                        }
                    })(marker,i));
                    google.maps.event.addListener(marker,'mouseover',(function(marker,i){
                    	return function () {
                    		infowindow.setContent(trailheads[i][0]);
                    		infowindow.open(map,marker);
						}
					})(marker,i));
					google.maps.event.addListener(marker,'mouseout',(function(marker,i){
                    	return function () {
                    		infowindow.setContent(trailheads[i][0]);
                    		infowindow.close(map,marker);
						}
					})(marker,i));
                }
          }
        /*
        google.maps.event.addListener(map, 'center_changed', function() {
          // 3 secs after center of the map has changed, pan back to marker
          window.setTimeout(function() {
            map.panTo(markers[0].getPosition());
          }, 7000);
        });*/

      }
      google.maps.event.addDomListener(window, 'load', initialize);

      /* Reloads map with new coords */
      function reloadMap(form) {
	var latitude = form.latitude.value;
	var longitude = form.longitude.value;
        var mapOptions = {
          center: new google.maps.LatLng(latitude, longitude),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

    /**************************************************************/
    /* Prepares the cv to be dynamically expandable/collapsible   */
    /**************************************************************/
    function prepareList() {
        $('#expList').find('li:has(ul)')
        .click( function(event) {
               if (this == event.target) {
               $(this).toggleClass('expanded');
               $(this).children('ul').toggle('medium');
               }
               return false;
               })
        .addClass('collapsed')
        .children('ul').hide();
        
        $('#expList2').find('li:has(ul)')
        .click( function(event) {
               if (this == event.target) {
               $(this).toggleClass('expanded');
               $(this).children('ul').toggle('medium');
               }
               return false;
               })
        .addClass('collapsed')
        .children('ul').hide();
    };

    function expandAll(){
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    }
    function collapseAll(){
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    }

    function showReviewInsertDiv(){
        document.getElementById('insertReview').style.display = "block";
        $('#tbox1 :input').attr('disabled', true);
        $('#map_canvas :input').attr('disabled', true);
        $('#tbox2 :input').attr('disabled', true);
    }
    function hideReviewInsertDiv(){
        document.getElementById('insertReview').style.display = "none";
        $('#tbox1 :input').attr('disabled', false);
        $('#map_canvas :input').attr('disabled', false);
        $('#tbox2 :input').attr('disabled', false);
    }
    function showTrailHeadInsertDiv(){
        document.getElementById('insertTrailHead').style.display = "block";
        $('#tbox1 :input').attr('disabled', true);
        $('#map_canvas :input').attr('disabled', true);
        $('#tbox2 :input').attr('disabled', true);
    }
    function hideTrailHeadInsertDiv(){
        document.getElementById('insertTrailHead').style.display = "none";
        $('#tbox1 :input').attr('disabled', false);
        $('#map_canvas :input').attr('disabled', false);
        $('#tbox2 :input').attr('disabled', false);
    }
    function showTrailInsertDiv(){
        document.getElementById('insertTrail').style.display = "block";
        $('#tbox1 :input').attr('disabled', true);
        $('#map_canvas :input').attr('disabled', true);
        $('#tbox2 :input').attr('disabled', true);
    }
    function hideTrailInsertDiv(){
        document.getElementById('insertTrail').style.display = "none";
        $('#tbox1 :input').attr('disabled', false);
        $('#map_canvas :input').attr('disabled', false);
        $('#tbox2 :input').attr('disabled', false);
    }
    function showLoginDiv(){
    	document.getElementById('login').style.display = "block";
    	$('#tbox1 :input').attr('disabled', true);
        $('#map_canvas :input').attr('disabled', true);
        $('#tbox2 :input').attr('disabled', true);
        $('#header :input').attr('disabled',true);
	}
	function hideLoginDiv(){
		document.getElementById('login').style.display = "none";
		$('#tbox1 :input').attr('disabled', false);
        $('#map_canvas :input').attr('disabled', false);
        $('#tbox2 :input').attr('disabled', false);
        $('#header :input').attr('disabled',false);
	}
	function showRegisterDiv(){
    	document.getElementById('register').style.display = "block";
    	$('#tbox1 :input').attr('disabled', true);
        $('#map_canvas :input').attr('disabled', true);
        $('#tbox2 :input').attr('disabled', true);
        $('#header :input').attr('disabled',true);
	}
	function hideRegisterDiv(){
		document.getElementById('register').style.display = "none";
		$('#tbox1 :input').attr('disabled', false);
        $('#map_canvas :input').attr('disabled', false);
        $('#tbox2 :input').attr('disabled', false);
        $('#header :input').attr('disabled',false);
	}
    </script>
  </head>

  <!-- ============== START OF BODY ================ -->
  <body onload="initialize()">
    <div id="wrapper">
    <div id="header">
        <div id="logo">
        <h1><a href="#">Trail Finder</a></h1>
        <p>A Guide to Getting Outside</p>
        </div>
        <div id="menu">
            <ul>
     
      <?php
	  if(!$userName)
      {
      echo "<li><button type='button' onclick='showLoginDiv()'>Login</button></li>";
      echo "<li><button type='button' onclick='showRegisterDiv()'>Register</button></li>";

      }
      else
      {
      echo "<li><form method='link' action='account.php'>";
      echo "<input type='submit' value='My Account'>";
      echo "</form></li>";
      echo "<li><form method='link' action='logout.php'>";
      echo "<input type='submit' value='Logout'>";
      echo "</form></li>";
      }
      ?>
            </ul>
        </div>
    </div>

    <div id="page">

    <div id="content">
        <h2>Trail Map</h2>
        <div id="map_canvas"></div>
    </div>

    <div id="sidebar">
        <div id="tbox1">
            <ul id="style1">
                <!--<li class="first">
                    <h3>Lat/Long Search</h3>
                    <p>
                        <form name="LatLong" action="" method="get">
                        Latitude: <input type="text" name="latitude"><br/>
                        Longitude: <input type="text" name="longitude"><br/>
                        <button type="button" name="llbutton" onclick="reloadMap(this.form)">Submit</button>
                        <br/>
                        <button type="button" name="reset" onclick="initialize()">Reset</button>
                        </form>
                    </p>
                </li>-->
                <li class="first">
                    <h3>Trailhead Search</h3>
                    <p>
                        <form name="Trailhead Search" action="filterTrailHead.php" method="post">
<?php if($userName){
    echo "<input type='hidden' name='userName' value='". $userName ."'/>";
}
    ?>
                        Altitude:
                        <select name="altitude">
                        <option value="-1">All</option>
                        <option
                        <?php if ($_SESSION['altitude'] == '0') { ?>selected="true" <?php }; ?>
                        value="0">0-3000 ft</option>
                        <option
                        <?php if ($_SESSION['altitude'] == '3000') { ?>selected="true" <?php }; ?>
                        value="3000">3000-6000 ft</option>
                        <option
                        <?php if ($_SESSION['altitude'] == '6000') { ?>selected="true" <?php }; ?>
                        value="6000">6000-9000 ft</option>
                        <option
                        <?php if ($_SESSION['altitude'] == '9000') { ?>selected="true" <?php }; ?>
                        value="9000">9000+ ft</option>
                        </select>
                        </br>
                        Dogs Allowed:
                        <select name="dogs">
                        <option value="-1">All</option>
                        <option
                        <?php if ($_SESSION['dogs'] == 'yes') { ?>selected="true" <?php }; ?>
                        value="yes">Yes</option>
                        <option
                        <?php if ($_SESSION['dogs'] == 'no') { ?>selected="true" <?php }; ?>
                        value="no">No</option>
                        </select>
                        </br>
                        Bikes Allowed:
                        <select name="bikes">
                        <option value="-1">All</option>
                        <option
                        <?php if ($_SESSION['bikes'] == 'yes') { ?>selected="true" <?php }; ?>
                        value="yes">Yes</option>
                        <option
                        <?php if ($_SESSION['bikes'] == 'no') { ?>selected="true" <?php }; ?>
                        value="no">No</option>
                        </select>
                        </br>
                        <p style="padding-top:5px">
                        <button type="submit" class="button-style2">Submit</button>
                        </br>
                        </p>
                        </form>
                        <form name="Reset" action="resetTrailHeadFilter.php" method="post">
                        <button type="submit" class="button-style2" onclick="initialize()">Reset</button>
                        </form>
                            <?php if($userName){
                                ?>
                        <form name="Auto-Fill" action="getTrailHeadFilter.php" method="post">
<?php
    echo "<input type='hidden' name='userName' value='". $userName ."'/>";
    ?>
                        <button type="submit" class="button-style2">Auto-Fill</button>
                        </form>
                            <?php }
                                ?>
                    </p>
                </li>
                <li>
                    <h3>Trail Search</h3>
                    <p>
                        <form name="Trail Search" action="filterTrail.php" method="post">
<?php if($userName){
    echo "<input type='hidden' name='userName' value='". $userName ."'/>";
}
    ?>
                        Length:
                        <select name="length">
                        <option value="-1">All</option>
                        <option
                        <?php if ($_SESSION['length'] == '0') { ?>selected="true" <?php }; ?>
                        value="0">0-10 Miles</option>
                        <option
                        <?php if ($_SESSION['length'] == '10') { ?>selected="true" <?php }; ?>
                        value="10">10-20 Miles</option>
                        <option
                        <?php if ($_SESSION['length'] == '20') { ?>selected="true" <?php }; ?>
                        value="20">20+ Miles</option>
                        </select>
                        </br>
                        Highest Altitude:
                        <select name="highest_altitude">
                        <option value="-1">All</option>
                        <option
                        <?php if ($_SESSION['highest_altitude'] == '0') { ?>selected="true" <?php }; ?>
                        value="0">0-3000 ft</option>
                        <option
                        <?php if ($_SESSION['highest_altitude'] == '3000') { ?>selected="true" <?php }; ?>
                        value="3000">3000-6000 ft</option>
                        <option
                        <?php if ($_SESSION['highest_altitude'] == '6000') { ?>selected="true" <?php }; ?>
                        value="6000">6000-9000 ft</option>
                        <option
                        <?php if ($_SESSION['highest_altitude'] == '9000') { ?>selected="true" <?php }; ?>
                        value="9000">9000-12000 ft</option>
                        <option
                        <?php if ($_SESSION['highest_altitude'] == '12000') { ?>selected="true" <?php }; ?>
                        value="12000">12000+ ft</option>
                        </select>
                        </br>
                        Difficulty:
                        <select name="difficulty">
                        <option value="-1">All</option>
                        <option
                        <?php if ($_SESSION['difficulty'] == '0') { ?>selected="true" <?php }; ?>
                        value="0">0-3 (Easy)</option>
                        <option
                        <?php if ($_SESSION['difficulty'] == '3') { ?>selected="true" <?php }; ?>
                        value="3">3-6 (Intermediate)</option>
                        <option
                        <?php if ($_SESSION['difficulty'] == '6') { ?>selected="true" <?php }; ?>
                        value="6">6-10 (Hard)</option>
                        </select>
                        </br>
                        <p style="padding-top:5px">
                        <button type="submit" class="button-style2">Submit</button>
                        </br>
                        </p>
                        </form>
                        <form name="Reset" action="resetTrailFilter.php" method="post">
                        <button type="submit" class="button-style2" onclick="initialize()">Reset</button>
                        </form>
                        <?php if($userName){
                            ?>
                        <form name="Auto-Fill" action="getTrailFilter.php" method="post">
                        <?php
                            echo "<input type='hidden' name='userName' value='". $userName ."'/>";
                            ?>
                        <button type="submit" class="button-style2">Auto-Fill</button>
                        </form>
                        <?php }
                            ?>
                    </p>
                </li>
                <li>
                    <h2>Trails</h2>
                    <p>
                        <input type="submit" value="Expand All" class="button-style2" onclick="expandAll()"/>
                        <input type="submit" value="Collapse All" class="button-style2" onclick="collapseAll()"/>
                        <div id="trail_list">
                        <ul id="expList" style="padding: 3px; border-top: none;">

<?php
    $i=0;
    $k=0;
    if($num < 1){
        echo"No Trailheads/Trails available.";
    }
    while ($i < $num){
        $trailhead_name=mysql_result($result, $i, "name");
        $trailhead_id=mysql_result($result, $i, "ID");
?>
                    <li id="head" style="padding-top: 4px"><?php echo"$trailhead_name"; ?>
                        <ul>
<?php
    if($filterTrailQuery){
        $query2 = $filterTrailQuery . " AND headID = $trailhead_id;";
    }else{
        $query2="SELECT * FROM Trail WHERE headID=$trailhead_id;";
    }
    $result2=mysql_query($query2);
    $num2=mysql_numrows($result2);
    
    $j=0;
    while($j < $num2){
        $trail_name=mysql_result($result2, $j, "name");
        $trail_id=mysql_result($result2, $j, "ID");
?>
                            <li id="trail" onclick= <?php echo"printTrailInfo($trail_id)"; ?>
    style="padding-top: 4px"><?php echo"$trail_name"; ?>
                            </li>
<?php
    ++$j;
    ++$k;
    }
?>
                        </ul>
                    </li>
<?php
    ++$i;
    }
    
    mysql_close();
?>

            </ul>
        <script type="text/javascript">
            prepareList();
        </script>
            <p style="padding-top:5px">
        <?php
            if($admin)
            {
                echo "<input type='submit' class='button-style2' value='Insert Trail Head' onclick='showTrailHeadInsertDiv()'/>";
                
            }
            ?>
            </p>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="three-column">
        <div id="tbox2">
            <h2 id='header3'></h2>
            <p id="info">
            </p>
        </div>
        <div id="tbox3">
            <h2 id='reviewHeader'></h2>
            <p id="review_info">
            </p>
        </div>
    </div>

    <div id="footer">
    <p>Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org">FCT</a>. Photos by <a href="http://fotogrph.com/">Fotogrph</a>.</p>
    </div>

    <div id="insertReview" style="display: none;">
        <div id="colLabel">
            <div id="labelDiv">Rating: </div><br/>
            <div id="labelDiv">Review: </div><br/>
        </div>
        <div id="colForm">
            <form name="InsertReview" action="insertReview.php" method="post">
                <input type="hidden" name="userName"/>
                <input type="hidden" name="trailName"/>
                <select name="rating">
                    <option value=0>0</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                    <option value=6>6</option>
                    <option value=7>7</option>
                    <option value=8>8</option>
                    <option value=9>9</option>
                    <option value=10>10</option>
                </select>
                <br/>
                <textarea name="review" cols="19" rows="6"></textarea><br/>
                <br/>
                <input type="submit" value="Submit" class="button-style3" onclick="hideReviewInsertDiv()"/>
                <input type="button" value="Cancel" class="button-style3"  onclick="hideReviewInsertDiv()"/>
            </form>
        </div>
    </div>

    <div id="insertTrailHead" style="display: none;">
        <div id="colLabel">
            <div id="labelDiv">Name: </div><br/>
            <div id="labelDiv">GPS Coordinates: </div><br/>
            <p style="font-size: 8pt">N39 59.930 W105 16.970</p>
            <div id="labelDiv">Start Altitude: </div><br/>
            <div id="labelDiv">Dogs allowed: </div><br/>
            <div id="labelDiv">Bikes allowed: </div><br/>
        </div>
        <div id="colForm">
            <form name="Insert Trail Head" action="insertTrailHead.php" method="post">
                <input type="text" name="name"><br/>
                <input type="text" name="gps"/><br/><br/>
                <input type="text" name="start_altitude"/><br/>
                <select name="dog">
                    <option value=yes>Yes</option>
                    <option value=no>No</option>
                </select><br/>	
                <select name="bike">
                    <option value=yes>Yes</option>
                    <option value=no>No</option>
                </select><br>
                <input type="submit" class="button-style3" value="Submit" onclick="hideTrailHeadInsertDiv()"/>
                <input type="button" class="button-style3" value="Cancel" onclick="hideTrailHeadInsertDiv()"/>
            </form>
        </div>
    </div>

    <div id="insertTrail" style="display: none;">
        <div id="colLabel">
            <div id="labelDiv">Name: </div><br/>
            <div id="labelDiv">Length: </div><br/>
            <div id="labelDiv">Highest Altitude: </div><br/>
            <div id="labelDiv">Difficulty: </div><br/>
            <div id="labelDiv">Notes: </div><br/>
        </div>
        <div id="colForm">
            <form name="InsertTrail" action="insertTrail.php" method="post">
            <input type="hidden" name="trailHeadName"/>
            <input type="text" name="name"><br/>
            <input type="text" name="length"/><br/>
            <input type="text" name="highest_altitude"/><br/>
            <select name="difficulty">
                <option value=0>0</option>
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=4>4</option>
                <option value=5>5</option>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
            </select><br/>
            <textarea name="notes" cols="20" rows="3"></textarea><br/>
            <input type="submit" class="button-style3" value="Submit" onclick="hideTrailInsertDiv()"/>
            <input type="button" class="button-style3" value="Cancel" onclick="hideTrailInsertDiv()"/>
            </form>
        </div>
    </div>

    <div id="login" style="display: none;">
    <div id="colLabel">
    <div id="labelDiv">Email Address: </div><br/>
    <div id="labelDiv">Password: </div>
    </div>
    <div id="colForm">
    <form name="Sign In" action="login.php" method="post">
    <input type="text" name="userName"><br/>
    <input type="password" name="password"><br/>
    <input type="submit" class="button-style3" value="Login" onclick="hideLoginDiv()"/>
    <input type="button" class="button-style3" value="Cancel" onclick="hideLoginDiv()"/>
    </form></div>
    </div>
    
    <div id="register" style="display: none;">
    <div id="colLabel">
    <div id="labelDiv">Email Address: </div><br/>
    <div id="labelDiv">Password: </div><br/>
    <div id="labelDiv">First Name: </div><br/>
    <div id="labelDiv">Last Name: </div><br/>
    <div id="labelDiv">City: </div><br/>
    <div id="labelDiv">State: </div><br/>
    <div id="labelDiv">Date of Birth: </div><br/>
    <div id="labelDiv">Gender: </div><br/><br/>
    <div id="labelDiv">Biography: </div><br/><br/><br/>
    </div>
    <div id="colForm">
    <form name="Register" action="insertAccount.php" method="post">
    <input type="email" name="userName"><br/>
    <input type="password" name="password"><br/>
    <input type="text" name="firstName"><br/>
    <input type="text" name="lastName"><br/>
    <input type="text" name="city"><br/>
    <input type="text" name="state"><br/>
    <input type="date" name="DOB"><br/>
    <input type="radio" name="sex" value="m">Male<br/>
    <input type="radio" name="sex" value="f">Female<br/>
    <textarea name="bio" cols="20" rows="3"></textarea><br/>
    <input type="submit" class="button-style3" value="Create Account" onclick="hideRegisterDiv()"/>
    <input type="button" class="button-style3" value="Cancel" onclick="hideRegisterDiv()"/>
    </form></div>
    </div>

    </div>

  </body>

